<link rel="stylesheet" href="../source/css/controls.css" />

<style>
body {
  overflow: hidden;
}
.scroll-row-style {
  overflow: hidden;
  width: 99%;
  background-color: #8bd;
  border: 6px solid #999;
  position: relative;
}
.scroll-div-style {
  margin: 5px;
}
.scroll-items-div-style {
}
.scroll-item-style {
  background-color: #58b;
  border-radius: 10px;
  color: #ddd;
  padding: 10px;
  font-family: sans-serif;
  font-size: 20pt;
  border: #58b solid 6px;
}
.item-hover {
  border: #dd0 solid 6px !important;
}
.photo {
  position: absolute;
  left: 0;
  top: 0;
}
.sidenav-item-div-style {
  overflow: hidden;
}
.sidenav-item-style {
  margin: 0;
  padding: 0;
}
.sidenav-holder {
  position: absolute;
  top: 0;
  left: 0;
}
.sidenav-row-holder {
  position: relative;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="../source/js/scrollrow.js"></script>
<script type="text/javascript" src="../source/js/sidenav.js"></script>
<script type="text/javascript" src="../source/js/gtvcore.js"></script>
<script type="text/javascript" src="../source/js/keycontrol.js"></script>

<script type="text/javascript">
/**
 * Creates the content for the page and adds it to the specified parent
 * element. This page has a set of thumbnails displayed in a single row
 * control.
 * @param {jQuery.Element} topParent The parent element for the page contents.
 */
function makePage(topParent) {
  var keyController = new gtv.jq.KeyController();
  keyController.start();

  var FEED_URL = 'http://picasaweb.google.com/data/feed/base/featured?' +
                 'alt=json-in-script&kind=photo&access=public&' +
                 'slabel=featured&hl=en_US&max-results=25';

  function makeItem(entry) {
    var thumb = entry.media$group.media$thumbnail[0].url;
    if (!thumb) {
      return null;
    }

    var item = $('<img></img>');
    item.css({
      height: '150px',
      display: 'block'
    })
    item.attr('src', thumb);

    var content = entry.media$group.media$content[0].url;
    item.data('url', content);

    return item;
  }

  var rowControl;
  function makeRow(items) {
    function choiceCallback(item) {
      // the img we created was placed inside a container
      // by Row Control
      var image = item.children().first();
      var url = image.data('url');

      photo.attr('src', url);
    }

    function addNavItem(parent) {
      if (rowControl) {
        // already created row control
        return false;
      }

      var scrollRowContainer = $('<div></div>')
          .addClass('sidenav-row-holder');

      var windowWidth = $(window).width();
      scrollRowContainer.width(windowWidth);
      parent.append(scrollRowContainer);

      var styles = {
        row: 'scroll-row-style',
        itemsDiv: 'scroll-items-div-style',
        itemDiv: 'scroll-div-style',
        item: 'scroll-item-style',
        hover: 'item-hover'
      };

      rowControl = new gtv.jq.RowControl({
        containerId: 'row-container',
        styles: styles,
        keyController: keyController,
        choiceCallback: choiceCallback
      });

      rowControl.showControl({
        topParent: scrollRowContainer,
        contents: {
          items: items
        }
      });

      rowControl.enableNavigation(keyController);

      var scrollRow = scrollRowContainer.children('#row-container');
      scrollRowContainer.height(scrollRow.height());
      return true;
    }

    var hideTimeout;
    $(document).bind('mousemove keydown', function() {
        if (hideTimeout) {
          window.clearTimeout(hideTimeout);
        }
        hideTimeout = window.setTimeout(function() {
          keyController.setSelected($(photo), function() {
            })
          },
          3000);
     });
    var photoContainer = $('<div></div>').attr('id', 'photo-container');
    topParent.append(photoContainer);

    var photo = $('<img></img>')
      .addClass('photo')
      .css('height', $(window).height());
    photoContainer.append(photo);

    var photoZone = new gtv.jq.KeyBehaviorZone({
        containerSelector: '#photo-container',
        navSelectors: {
          item: '.photo'
        }
      });
    keyController.addBehaviorZone(photoZone);

    var sidenavHolder = $('<div></div>').addClass('sidenav-holder');
    topParent.append(sidenavHolder);

    var behaviors = {
      popOut: 'bottom',
      orientation: 'horizontal'
    };

    var styles = {
      item: 'sidenav-item-style',
      itemDiv: 'sidenav-item-div-style',
      row: 'sidenav-row-style',
      chosen: 'sidenav-item-chosen',
      normal: 'sidenav-item-normal',
      selected: 'sidenav-item-hover'
    };

    sidenavControl = new gtv.jq.SideNavControl({
      createParams: {
        containerId: 'sidenav',
        styles: styles,
        keyController: keyController
      },
      behaviors: behaviors
    });

    sidenavControl.showControl({
      topParent: sidenavHolder,
      contents: {
        itemsGenerator: addNavItem
      }
    });

    photo.attr('src', items[0].data('url'));
  }

  gtv.jq.GtvCore.processJsonpFeed(
    FEED_URL,
    makeItem,
    makeRow,
    ['feed','entry']);

};

/**
 * jQuery callback made when the page has been loaded and is ready.
 */
$(document).ready(function() {
    makePage($("body"));
  });
</script>
